<template>
  <div id="hotelCollect" class="hotel-collect-container">
    <!-- 页面头部 - 使用蓝色渐变 -->
    <div class="header-section">
      <div class="header-content">
        <div class="title-section">
          <h2 class="page-title">
            <i class="el-icon-star"></i> 酒店收藏管理
          </h2>
          <p class="page-subtitle">管理用户收藏的酒店数据</p>
        </div>
        <div class="total-count">
          <div class="count-card">
            <span class="count-label">总收藏数</span>
            <span class="count-value">{{ totalFavoriteCount }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索筛选区 -->
    <div class="search-filter-card">
      <div class="filter-group">
        <div class="filter-item">
          <label class="filter-label">
            <i class="el-icon-user"></i> 收藏用户
          </label>
          <el-input
            v-model="filterForm.userName"
            placeholder="输入用户名搜索"
            clearable
            class="filter-input"
            @keyup.enter="handleSearch"
          />
        </div>
        <div class="filter-item">
          <label class="filter-label">
            <i class="el-icon-office-building"></i> 酒店名称
          </label>
          <el-input
            v-model="filterForm.hotelName"
            placeholder="输入酒店名称搜索"
            clearable
            class="filter-input"
            @keyup.enter="handleSearch"
          />
        </div>
        <div class="filter-item">
          <label class="filter-label">
            <i class="el-icon-date"></i> 收藏时间
          </label>
          <el-date-picker
            v-model="filterForm.favoriteTimeRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            class="compact-date-picker"
          />
        </div>
      </div>
      
      <div class="action-buttons">
        <el-button 
          type="primary" 
          @click="handleSearch"
          class="search-btn"
        >
          查询
        </el-button>
        <el-button 
          @click="handleReset"
          class="reset-btn"
        >
          重置
        </el-button>
        <el-button 
          type="danger" 
          @click="handleBatchDelete"
          :disabled="multipleSelection.length === 0"
          class="batch-delete-btn"
        >
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="data-table-card">
      <el-table
        :data="tableData"
        border
        stripe
        highlight-current-row
        style="width: 100%"
        v-loading="loading"
        empty-text="暂无收藏数据"
        :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <el-table-column 
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column 
          prop="userName" 
          label="收藏用户" 
          width="150" 
          align="center"
        >
          <template #default="{row}">
            <span class="username">{{ row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column 
          prop="hotelName" 
          label="收藏酒店" 
          min-width="220"
        >
          <template #default="{row}">
            <div class="scenic-name-cell">
              <i class="el-icon-office-building"></i>
              <span class="scenic-name">{{ row.hotelName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column 
          prop="favoriteTime" 
          label="收藏时间" 
          width="180" 
          align="center"
          sortable="custom"
        >
          <template #default="{ row }">
            <div class="time-cell">
              <i class="el-icon-time"></i>
              <span>{{ formatTime(row.favoriteTime) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column 
          label="操作" 
          width="120" 
          align="center"
          fixed="right"
        >
          <template #default="{ row }">
            <el-button 
              type="danger" 
              size="small"
              plain
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页控制 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        background
      />
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'  // 引入dayjs

export default {
  name: 'HotelCollect',
  data() {
    return {
      loading: false,
      totalFavoriteCount: 0,
      tableData: [],
      multipleSelection: [],
      filterForm: {
        userName: '',
        hotelName: '',
        favoriteTimeRange: []
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      sort: { // 新增排序字段
        prop: '',
        order: ''
      }
    }
  },
  mounted() {
    this.fetchData()
    this.fetchTotalCount()
  },
  methods: {
    // 获取数据
    fetchData() {
      this.loading = true
      const params = {
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        userName: this.filterForm.userName,
        hotelName: this.filterForm.hotelName,
        // 添加排序参数
        sortField: this.sort.prop,
        sortOrder: this.sort.order
      }

      // 添加时间范围参数
      if (this.filterForm.favoriteTimeRange && this.filterForm.favoriteTimeRange.length === 2) {
        params.startTime = this.filterForm.favoriteTimeRange[0]
        params.endTime = this.filterForm.favoriteTimeRange[1]
      }

      this.$http.get('/hotelCollect/list', { params })
        .then(response => {
          this.tableData = response.data.list || []
          this.pagination.total = response.data.total || 0
        })
        .catch(error => {
          ElMessage.error('获取数据失败: ' + (error.response?.data?.message || '服务器错误'))
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 处理排序变化
    handleSortChange({ column, prop, order }) {
      this.sort.prop = prop
      this.sort.order = order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : ''
      this.fetchData()
    },

    // 获取总收藏数
    fetchTotalCount() {
      this.$http.get('/hotelCollect/count')
        .then(response => {
          this.totalFavoriteCount = response.data || 0
        })
        .catch(error => {
          ElMessage.error('获取总收藏数失败')
          console.error(error)
        })
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
      this.fetchData()
    },

    // 页码改变
    handlePageChange(val) {
      this.pagination.currentPage = val
      this.fetchData()
    },

    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1
      this.fetchData()
    },

    // 重置
    handleReset() {
      this.filterForm = {
        userName: '',
        hotelName: '',
        favoriteTimeRange: []
      }
      this.sort = { // 重置排序状态
        prop: '',
        order: ''
      }
      this.pagination.currentPage = 1
      this.fetchData()
    },

    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 单个删除
    handleDelete(row) {
      ElMessageBox.confirm('确认删除这条收藏记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return this.$http.delete(`/hotelCollect/delete/${row.id}`)
        })
        .then(() => {
          ElMessage.success('删除成功')
          this.fetchData()
          this.fetchTotalCount()
        })
        .catch(error => {
          if (error !== 'cancel' && error !== 'close') {
            ElMessage.error('删除失败: ' + (error.response?.data?.message || '服务器错误'))
          }
        })
    },

    // 批量删除
    handleBatchDelete() {
      if (this.multipleSelection.length === 0) {
        ElMessage.warning('请至少选择一条记录')
        return
      }

      ElMessageBox.confirm(`确认删除选中的${this.multipleSelection.length}条记录吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const ids = this.multipleSelection.map(item => item.id)
          return this.$http.delete('/hotelCollect/batchDelete', { data: { ids } })
        })
        .then(() => {
          ElMessage.success('删除成功')
          this.fetchData()
          this.fetchTotalCount()
          this.multipleSelection = []
        })
        .catch(error => {
          if (error !== 'cancel' && error !== 'close') {
            ElMessage.error('删除失败: ' + (error.response?.data?.message || '服务器错误'))
          }
        })
    },

    // 格式化日期为YYYY-MM-DD HH:mm格式
    formatTime(time) {
      if (!time) return '';
      return dayjs(time).format('YYYY-MM-DD HH:mm');
    }
  }
}
</script>

<style scoped lang="scss">
/* 整体容器 */
.hotel-collect-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
  background-color: #f8fafc;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

/* 头部区域 - 修改为蓝色渐变 */
.header-section {
  background: linear-gradient(135deg, #a0c4e4 0%, #7fa8d1 100%);
  padding: 20px 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(160, 196, 228, 0.2);
  margin-bottom: 24px;
  color: #2c3e50;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  .page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    
    i {
      font-size: 28px;
      color: #2c3e50;
    }
  }
  
  .page-subtitle {
    margin: 5px 0 0;
    font-size: 14px;
    color: #4a5568;
  }
}

.total-count {
  .count-card {
    background: rgba(255, 255, 255, 0.7);
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e2e8f0;
    
    .count-label {
      font-size: 14px;
      margin-bottom: 5px;
      color: #4a5568;
    }
    
    .count-value {
      font-size: 24px;
      font-weight: 700;
      color: #2c3e50;
    }
  }
}

/* 搜索筛选卡片 */
.search-filter-card {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.filter-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  
  .filter-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    
    i {
      font-size: 16px;
    }
  }
  
  .filter-input {
    :deep(.el-input__inner) {
      border-radius: 8px;
      height: 40px;
      line-height: 40px;
    }
  }
  
  .compact-date-picker {
    width: 100%;
    
    :deep(.el-input__inner) {
      height: 36px;
      line-height: 36px;
    }
    
    :deep(.el-date-editor .el-range-separator) {
      line-height: 36px;
      padding: 0 8px;
      width: auto;
    }
    
    :deep(.el-date-editor .el-range-input) {
      height: 36px;
      width: 38%;
    }
    
    :deep(.el-date-editor .el-range__close-icon) {
      line-height: 36px;
    }
    
    :deep(.el-date-editor .el-range__icon) {
      line-height: 36px;
    }
  }
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  
  .search-btn {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    height: 40px;
    
    &:hover {
      opacity: 0.9;
    }
  }
  
  .reset-btn {
    border-radius: 8px;
    padding: 10px 20px;
    height: 40px;
    border: 1px solid #dcdfe6;
    
    &:hover {
      color: #4299e1;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
}
//批量删除样式
.batch-delete-btn {
  border-radius: 8px;
  padding: 10px 20px;
  height: 40px;
  
  &:hover {
    opacity: 0.9;
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

/* 数据表格卡片 */
.data-table-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
  
  :deep(.el-table) {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    
    th {
      background-color: #f8fafc !important;
      font-weight: 600;
      color: #4a5568;
    }
    
    /* 调整单元格内边距与第一个文件一致 */
    td {
      padding: 12px 0;
    }
    
    .el-table__row:hover {
      background-color: #f0f4f8;
    }
  }
}

.username {
  font-weight: 500;
  color: #2c3e50;
}

.scenic-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  
  i {
    font-size: 18px;
    color: #48bb78;
  }
  
  .scenic-name {
    font-size: 15px;
    font-weight: 500;
    color: #3182ce;
  }
}

/* 时间单元格样式 - 与第一个文件保持一致 */
.time-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #718096;
  
  i {
    font-size: 16px;
  }
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 15px 0;
  
  :deep(.el-pagination) {
    .btn-prev, .btn-next {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }
    
    .el-pager li {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      margin: 0 4px;
      background: white;
      
      &.active {
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        color: white;
      }
    }
    
    .el-pagination__jump {
      .el-input__inner {
        border-radius: 8px;
      }
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .filter-group {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    justify-content: center;
  }
  
  .data-table-card {
    overflow-x: auto;
  }
}
</style>